.helios-main{
  height: 100vh;
  width: auto;
  .helios-sider{
    z-index: 5;
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    overflow: hidden;
    box-shadow: 12px 0 10px -10px rgba($shadow, .6);
    .menu-container{
      position: relative;
      display: inline-block;
      overflow-y: auto;
      box-sizing: border-box;
      width: calc(100% + 19px);
      padding-right: 18px;
      overflow-x: hidden;
      ul.ant-menu.ant-menu-root{
        list-style-type: none;
        padding-right: 18px;
        display: inline-block;
        box-sizing: content-box;
      }
      ul.ant-menu, ul.ant-menu-submenu{
        li.ant-menu-item a, div{
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 14px;
          font-weight: normal;
        }
      }
    }
    .ant-layout-sider-trigger{
      height: 36px;
    }
  }
  .content-layout{
    position: relative;
    z-index: 1;
    overflow-y: scroll;
    max-height: 100vh;
    background: $background-layout;
    -webkit-transition: all 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
    -ms-transition: all 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  .helios-header{
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 4;
    padding: 0 50px 0 20px !important;
    height: 64px;
    line-height: 64px;
    background: #fff;
    box-shadow: $shadow-affix;
    .user-area{
      background: white;
      position: absolute;
      right: 16px;
      top: 0;
      height: inherit;
      color: $font-default;
      .service-button {
        margin-right: 10px;
      }
      .operating-instruction{
        display: inline-block;
        padding: 0 12px;
        cursor: pointer;
      }
      .doc-button{
        display: inline-block;
        cursor: pointer;
        padding-left: 12px;
        i{ font-size: 14px; }
        &:hover{ background: $highlight-selected; }
      }
      .admin-button{
        display: inline-block;
        padding: 0 12px;
        cursor: pointer;
        position: relative;
        .arrow{
          font-size: 12px;
          margin-left: 2px;
          transition: all .5s;
        }
        .admin-button-list{
          position: absolute;
          left: 0;
          top: 64px;
          width: 140px;
          padding: 0;
          background-color: $background-white;
          box-shadow: $shadow-card;
          border-radius: 4px;
          z-index: 999;
          transition: all 0.5s;
          display: none;
          li{
            list-style: none;
            line-height: 36px;
            padding: 0 16px;
            &:hover{
              background-color: $highlight-default;
            }
          }
          a{
            color: $font-subtitle;
          }
        }
        &:hover{
          background: $highlight-selected;
          .admin-button-list{
            display: block;
          }
          .arrow{
            transform:rotate(180deg);
            -ms-transform:rotate(180deg);
            -moz-transform:rotate(180deg);
            -webkit-transform:rotate(180deg);
            -o-transform:rotate(180deg);
          }
        }
      }
      .title{
        margin-left: 6px;
        padding-right: 12px;
      }
    }
    .breadcrumb{
      min-width: 350px;
      font-size: 12px;
      display: inline-block;
      height: inherit;
      line-height: 64px;
      .last-breadcrumb{
        font-size: 16px;
        font-weight: 600;
        color: $font-default;
        .ant-breadcrumb-separator{
          display: none;
        }
      }
    }
  }
  .helios-content{
    padding: 27px 20px 20px;
    background: #fff;
    margin: 72px 16px 8px;
    min-height: calc(100vh - 80px);
    &::after{
      content: "";
      clear: both;
    }
    &.collapsed {
      .slide-frame.zx-frame {
        width: calc(100vw - 80px) !important;
      }
    }
    .zx-frame {
      .slide-content {
        overflow-y: hidden !important;
      }
    }
  }
}

